<template>
    <view class="page">
        <view class="relevance-list">
            <view class="list" @click="onRelevance('wx')">
                <view class="title">
                    <image src="/static/wx_pay.png" mode=""></image>
                    <text>微信</text>
                </view>
                <view class="more">
                    <text>已关联</text>
                    <text class="iconfont icon-more"></text>
                </view>
            </view>
        </view>
        <view class="hint">
            <text>账号关联之后，用户可以使用微信账号快速登录。在进行各个渠道进行购物时，均可同步会员账号，享受会员特权，同步订单物流信息。</text>
        </view>
        <!-- 提示框 -->
        <DialogBox ref="DialogBox"></DialogBox>
    </view>
</template>

<script>
export default {
    data() {
        return {

        };
    },
    methods: {
        /**
         * 账号关联点击
         * @param {String} type
         */
        onRelevance(type) {
            switch (type) {
                case 'wx':
                    this.$refs['DialogBox'].confirm({
                        title: '提示',
                        content: '是否要解除关联?',
                        DialogType: 'inquiry',
                        animation: 0
                    }).then(() => {
                        uni.navigateBack();
                    })
                    break;
            }
        }
    }
}
</script>

<style scoped lang="scss">
.page {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #f6f6f6;
}

/* 关联列表 */
.relevance-list {
    width: 100%;
    background-color: #ffffff;
    border-radius: 0 0 20rpx 20rpx;
    .list {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 4%;
        height: 80rpx;
        .title {
            display: flex;
            align-items: center;
            image {
                width: 40rpx;
                height: 40rpx;
            }
            text {
                font-size: 28rpx;
                color: #222222;
                margin-left: 20rpx;
            }
        }
        .more {
            display: flex;
            align-items: center;
            text {
                font-size: 28rpx;
                color: #c0c0c0;
            }
        }
    }
}
.hint {
    padding: 0 4%;
    margin: 20rpx auto;
    text {
        font-size: 24rpx;
        color: #959595;
    }
}
</style>
